<template>
<!-- better-scroll插件基本使用 -->
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Scroll from 'better-scroll'

export default {
    name: 'Scroll',
    props: {
        // 滚动侦测实时位置，0和1不获取position值，2和3获取
        probeType: {
            type: Number,
            default: 0
        },
        // 是否上拉加载更多
        pullUpLoad: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 用于new一个better-scroll实例
            scroll: null
        }
    },
    mounted() {
        this.scroll = new Scroll(this.$refs.wrapper,{
            click: true,
            probeType: this.probeType,
            pullUpLoad: this.pullUpLoad
        })

        // 监听滚动位置
        if(this.probeType === 2 || this.probeType === 3){
            this.scroll.on('scroll',(position) => {
                this.$emit('scroll',position)
            })
        }
        // 监听scroll滚动到底部
        if(this.pullUpLoad) {
            this.scroll.on('pullingUp',() => {
                this.$emit('pullingUp')
            })
        }
    },
    methods: {

        // 滚动到特定区域
        scrollTo(x,y,time=300) {
            // 处理数据加载在前，scroll实例创建在后报错
            // 判断scroll是否为null，不为null再执行代码
             this.scroll && this.scroll.scrollTo(x,y,time)
        },



        // 完成上拉加载更多
        finishPullUp() {
            this.scroll.finishPullUp()
        },
        // 重新获取内容宽度和高度
        refresh() {
            this.scroll && this.scroll.refresh()
        },
        //获取当前位置
        getScrollY() {
            return this.scroll ? this.scroll.y : 0
        }
    }
}
</script>

<style scoped>

</style>